<template>
    <div class="toolTips" :class="'tips_'+type" >
        <span>
            <slot></slot>
        </span>
        <div class="direct" :class="type"></div>
    </div>
</template>
<script>
import { ref } from 'vue';
export default {
    name:'g-tips',
    props:{
        type:{
            type:String,
            default:'top'
        }
    },
    setup(props){
        let type = ref(props.type)
        
        return {
            type
        }
    }
}
</script>
<style scoped>
    .toolTips{
        white-space: nowrap;
        position: absolute;
        
        background-color: #909399;
        border-radius: 5px;
        padding: 5px;
        color: white;
        font-size: 12px;
        visibility: hidden;
        opacity: 0;
        transition: opacity .4s;
        
        
    }
    .direct{
        height: 0;
        width: 0;
        position: absolute;
    }
    .top{
        bottom: -9px;
        left: 50%;
        transform: translateX(-50%);
        border-top: 5px solid #909399;
        border-right: 5px solid rgba(0, 0, 0, 0);
        border-bottom: 5px solid rgba(0, 0, 0, 0);
        border-left: 5px solid rgba(0, 0, 0, 0);
    }
    .bottom{
        top: -9px;
        left: 50%;
        transform: translateX(-50%);
        border-top: 5px solid rgba(0, 0, 0, 0);
        border-right: 5px solid rgba(0, 0, 0, 0);
        border-bottom: 5px solid #909399;
        border-left: 5px solid rgba(0, 0, 0, 0);
    }
    .left{
        right: -9px;
        top: 50%;
        transform: translateY(-50%);

        border-top: 5px solid rgba(0, 0, 0, 0);
        border-right: 5px solid rgba(0, 0, 0, 0);
        border-bottom: 5px solid rgba(0, 0, 0, 0);
        border-left: 5px solid #909399;
    }
    .right{
        left: -9px;
        top: 50%;
        transform: translateY(-50%);
        border-top: 5px solid rgba(0, 0, 0, 0);
        border-right: 5px solid #909399;
        border-bottom: 5px solid rgba(0, 0, 0, 0);
        border-left: 5px solid rgba(0, 0, 0, 0);
    }
    .tips_left{
        left: -10px;
        top: 50%;
        transform: translate(-100%,-50%);
    }
    .tips_right{
        right: -10px;
        top: 50%;
        transform: translate(100%,-50%);
    }
    .tips_top{
        top: -10px;
        left: 50%;
        transform: translate(-50%,-100%);
    }
    .tips_bottom{
        bottom: -10px;
        left: 50%;
        transform: translate(-50%,100%);
    }

</style>